import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    products: [
        { name: '鼠标', price: 20 },
        { name: '键盘', price: 40 },
        { name: '耳机', price: 60 },
        { name: '显示屏', price: 80 }
    ]
}

// 功能类似computed
const getters = {
    disCount:(state)=>{
        let disProduct=state.products.map(item=>{
            return{
                name:item.name,
                price:item.price/2
            }
        })
        return disProduct;
    }
}

// store中的 methods方法，监听兄弟组件间的点击事件
const mutations = {
    minusPrice:(state,payload)=>{
        let newPrice = state.products.forEach(product => {
            product.price -= payload
        })
    }
}
// 类似mutation 只是mutation不允许异步操作，action包含异步操作
const actions = {}



// modules:分块，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。如state里面有上百个状态，需要进行分块。
// const moduleA = {
//     state: { ... },
//     mutations: { ... },
//     actions: { ... },
//     getters: { ... }
// }

// const moduleB = {
//     state: { ... },
//     mutations: { ... },
//     actions: { ... }
// }

// const store = new Vuex.Store({
//     modules: {
//         a: moduleA,
//         b: moduleB
//     }
// })

// store.state.a // -> moduleA 的状态
// store.state.b // -> moduleB 的状态
export default new Vuex.Store({
    state, 
    getters,
    mutations,
    actions
})